<template>
	<a-modal
		:centered="true"
		:body-style="{ height: '434px', padding: '40px 32px' }"
		title="复制全部算法配置到..."
		class="copy-all-algorithms"
		:open="props.visible"
		width="800px"
		:confirm-loading="confirmLoading"
		@cancel="onClose"
	>
		<div class="copy-top-tree">
			<GlobalInputSearch v-model:value="searchValue" placeholder="设备名称" :width="324" />
			<br />
			<br />
			<a-table
				v-if="listData.length"
				:loading="aiListLoading"
				:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
				:columns="copyColumns"
				:data-source="clistData"
				:scroll="{ y: 490 }"
				:pagination="false"
				:row-key="(record: any) => record.boxDeviceId"
			/>
		</div>
		<template #footer>
			<a-button size="small" class="btn-default" @click="onClose">取消</a-button>
			<a-button
				v-if="listData.length"
				size="small"
				type="primary"
				:disabled="selectedRowKeys.length < 1"
				:loading="confirmLoading"
				@click="onSubmit"
				>确定</a-button
			>
		</template>
	</a-modal>
</template>

<script setup lang="ts" name="copy-all-algorithms">
import { CameraManagementAPI, AIConfigurationAPI } from '../../api';
import { Key } from 'ant-design-vue/es/_util/type';
type _Props = {
	visible: boolean;
	boxSerial: string;
	cameraInfoState: any;
};
const props = withDefaults(defineProps<_Props>(), {
	visible: false,
	boxSerial: '',
	cameraInfoState: {}
});
const emits = defineEmits<{
	(e: 'close'): void;
}>();

const loadings = ref(true);
const $message: any = inject('$message');
const searchValue = ref<string>(''); // 搜索值

const confirmLoading = ref(false);
const onClose = (): void => {
	if (loadings.value) {
		emits('close');
	}
};

const onSelectChange = (e: Key[]) => {
	selectedRowKeys.value = e;
};

const selectedRowKeys = ref<Key[]>([]);
const aiListLoading = ref(false);
const copyColumns: TsGlobalType.TsTableColumn[] = [
	{ dataIndex: 'name', title: '设备名称' },
	{ dataIndex: 'areaLinkName', title: '所属区域' },
	{ dataIndex: 'algorithmNameList', title: 'AI服务' }
];
const listData = ref<Record<string, string | number>[]>([]);
// 获取列表
const getList = async () => {
	try {
		let { data } = await CameraManagementAPI.list({ current: 1, pageSize: 30, boxSerial: props.cameraInfoState.boxSerial });
		if (data) {
			listData.value = data.records.filter(
				(item: Record<string, string | number>) => item.status === 1 && item.boxDeviceId !== props.cameraInfoState.id
			);
		}
	} catch (error) {
		console.log(error);
	}
};

const clistData = computed(() => {
	let arr = listData.value.filter((item) => (item.name as string).includes(searchValue.value));
	return arr;
});

const onSubmit = async () => {
	try {
		confirmLoading.value = true;
		let res = await AIConfigurationAPI.copyAllSrv({
			sourceBoxDeviceId: props.cameraInfoState.id,
			boxSerial: props.cameraInfoState.boxSerial,
			targetBoxDeviceId: selectedRowKeys.value
		});
		console.log('结果', res);

		if (res.code === 0) {
			emits('close');
			$message.success('复制配置成功');
		}
		confirmLoading.value = false;
	} catch (error) {
		console.log(error);
	}
};

watchEffect(() => {
	if (props.visible) {
		getList();
	}
});
</script>

<style lang="less">
// 弹窗
.copy-all-algorithms {
	overflow: hidden;
	height: 574px;
	color: @text01 !important;

	.ant-tree-checkbox-inner {
		border-color: @mask02 !important;
		background-color: @mask01 !important;
	}

	.ant-tree-checkbox-checked {
		background-color: @primary01 !important;
	}

	:where(.css-dev-only-do-not-override-kqecok).ant-tree .ant-tree-switcher {
		position: relative;
		flex: none;
		align-self: center;
		width: 24px;
		margin: 0;
		line-height: 24px;
		text-align: center;
		cursor: pointer;
		user-select: none;
	}

	:where(.css-dev-only-do-not-override-kqecok).ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected,
	:where(.css-dev-only-do-not-override-kqecok).ant-tree .ant-tree-checkbox + span.ant-tree-node-selected {
		background-color: @background01 !important;
	}

	:where(.css-dev-only-do-not-override-1t97qq9).ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected,
	:where(.css-dev-only-do-not-override-1t97qq9).ant-tree .ant-tree-checkbox + span.ant-tree-node-selected {
		background-color: transparent;
	}

	.ant-modal-content {
		height: 574px;
	}

	.ant-tree-treenode {
		display: flex;
		line-height: 36px;
		align-items: center !important;
	}

	.ant-tree-checkbox {
		margin: 0 4px;
	}

	.ant-tree {
		// height: 36px;
		// line-height: 36px;
		background-color: transparent !important;

		.ant-tree-title {
			color: @text02 !important;
		}

		.ant-tree-switcher {
			margin-top: 2px;

			svg {
				color: #ccc;
			}
		}
	}

	.ant-tree-list-holder-inner {
		display: block !important;
	}

	.ant-tree .ant-tree-node-content-wrapper:hover {
		background-color: transparent;
	}

	.tree-node-item {
		width: 100%;
		margin-bottom: 12px;
		padding: 0;
		line-height: 22px;
	}

	.ant-modal,
	.ant-modal-body {
		padding: 0 !important;
	}

	.ant-modal-body {
		overflow-y: scroll;
	}

	.copy-top-tree {
		padding: 24px 32px;

		.tree-item {
			display: flex;
			justify-content: flex-start;
			// justify-content: space-between;
			align-items: center;

			.groupName {
				margin-right: 12px;
			}

			.name {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}

		.tree-container {
			overflow-y: scroll;
			height: 350px;
			margin-top: 16px;
			border: 1px solid @borderColor02;
			border-radius: 6px;
			padding: 12px 8px;
		}
	}

	.title-type {
		height: 16px !important;
		margin: 0 8px 0 16px;
		margin-right: 4px;
		border: 1px solid #a5a9b4;
		border-radius: 8px;
		line-height: 16px;
		color: #0d4cca;
		background: radial-gradient(80.85% 100% at 50% 100%, rgba(221, 235, 255, 0.2) 0%, rgba(234, 243, 255, 0) 100%), #121e30;

		.title-type-text {
			display: flex;
			width: 40px;
			height: 16px !important;
			margin-right: 4px;
			border-radius: 8px;
			padding: 8px 4px;
			font-size: 12px;
			font-weight: 700;
			justify-content: flex-end;
			align-items: center;
			gap: 4px;
		}

		.title-type-number {
			font-size: 12px;
			font-weight: 400;
			font-style: normal;
			line-height: 20px; /* 142.857% */
			color: var(--text-01, #fff);

			/* 淡阴影/淡XS */
			text-shadow: 0 1px 4px rgba(2, 36, 59, 0.06);
		}
	}
}
</style>
